<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>
    <hr>
    <div class="box" id="top" title="box的标题">div元素内容</div>
    <!-- 
        div:元素节点,元素对象,标签
        class、id、title:属性节点
        div元素内容:文本节点
     -->

    <ul id="list">
        <!-- 我是注释 -->
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
    </ul>

    <ul id="list1">
        <!-- 我是注释 -->
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
        <li>55555</li>
        <p>ppppp</p>
    </ul>
</body>

</html>
<script>
    //一.DOM高级操作 - DOM元素类型
    //将html页面结构按照节点划分。
    //1.节点可以分为元素节点、属性节点和文本节点...，他们分别用不同的数字代表类型。
    //例如：元素(1) 属性(2) 文本(3) 注释(8)
    //每个节点又有三个非常有用的属性，分别为：nodeName节点名称、nodeType节点类型、nodeValue节点的值

    //box：元素节点，元素对象
    // var box = document.querySelector('.box');
    // console.log(box.nodeName); //DIV 当判断条件适宜
    // console.log(box.tagName); //DIV 获取元素对象的标签名称
    // console.log(box.nodeType); //数字表示 1
    // console.log(box.nodeValue); //元素节点是没有值的。 null

    // box属性节点 - attributes集合
    // NamedNodeMap {0: class, 1: id, 2: title, class: class, id: id, title: title, length: 3}
    // console.log(box.attributes);
    // console.log(box.attributes.length); //3
    // console.log(box.attributes[0]); //class="box"
    // console.log(box.attributes[1]); //id="top"

    // console.log(box.attributes[0].nodeName); //class
    // console.log(box.attributes[0].nodeValue); //box  高级获取
    // console.log(box.className); //简单获取
    // console.log(box.attributes[0].nodeType); //2

    // 二.childNodes(子节点)获取所有的子节点集合 - 返回类数组
    // childNodes 获取当前元素节点的所有子节点,这里面包含空白节点，但在IE9之前，浏览器会忽略空白节点

    // var ul = document.querySelector('ul');
    // console.log(ul.childNodes); //NodeList(11) [text, li, text, li, text, li, text, li, text, li, text]
    // console.log(ul.childNodes.length); //11
    // console.log(ul.childNodes[0]); //空文本节点。 
    // console.log(ul.childNodes[0].nodeType); //3
    // console.log(ul.childNodes[0].nodeName); //#text
    // console.log(ul.childNodes[0].nodeValue); //空

    // console.log(ul.childNodes[1].nodeType); //1
    // console.log(ul.childNodes[1].nodeName); //LI
    // console.log(ul.childNodes[1].nodeValue); //null

    //注释节点。
    // var list = document.querySelector('#list');
    // console.log(list.childNodes.length); //13
    // console.log(list.childNodes[1].nodeType); //8
    // console.log(list.childNodes[1].nodeName); //#comment
    // console.log(list.childNodes[1].nodeValue); // 我是注释

    // 三.children(子节点)获取所有的子节点集合 - 返回类数组
    // children不考虑空白节点,注释节点，仅获取元素节点
    // var list = document.querySelector('#list');
    // console.log(list.childNodes.length); //13(注释节点，空白节点，li节点)
    // console.log(list.children.length); //5 (li节点)

    // var lis1 = document.querySelectorAll('#list1 li'); //获取5个li
    // var lis2 = list.children; //获取list下面的子元素 5个li+1个p元素
    // console.log(lis1.length); //5
    // console.log(lis2.length); //6

    //children不考虑空白节点,仅获取元素节点,而childNodes考虑空白节点,注释节点,而且它们都是类数组。
</script>